<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="homeMainView">
			<view class="notice" @click="handleMainPro">
				<image class="noticeImage" src="@/static/icons/Card.png" mode=""></image>
				<view class="noticeText">
					<view>今日主推</view>
					<view class="text">
						{{mainProduc?.text}}
					</view>
				</view>
			</view>
			<view class="hotText">今日热卖</view>
			<view class="menus">
				<z-swiper class="swiperMenu" ref="_zSwiper" @init="initSwiper" v-model="hotProducs" :options="options">
					<z-swiper-item class="swiperMenuItem" @click="showProduc(item.id)"
						v-for="(item,index) in hotProducs" :key="item.id">
						<view class="menuImg" :style="`background-image:url(./static/cake/${item.image});background-size: cover;background-position: center;`">
							<!-- <image class="bgImg" src="@/static/cake/ice.png" mode="scaleToFill"></image> -->
							<image v-if="item.sellOut" class="sellout" src="@/static/icons/sellout.png" mode=""></image>
							<!-- <view class="type">
								{{item.type}}
							</view> -->
							<view class="name">
								{{item.text}}
							</view>
						</view>
					</z-swiper-item>
				</z-swiper>

			</view>
			 
			<view class="info">
				<icon type="info" color="#9ca3af" size="14" />
				<text>营业时间：9:00-18:00 </text>
			</view>
			 
		</view>
	</view>
</template>

<script setup>
	import mockimg from '~/static/cake/ice.png'
	import {
		backgroundImg,
		autoimg
	} from "~/utils/tool.js"
 
	import useSystemStore from '@/store/modules/system'
	import { computed, onMounted, watch } from 'vue';
	const systemStore = useSystemStore()
	const {
		dataTheme
	} = storeToRefs(systemStore);
	
	import useProductStore from '@/store/modules/product'
	const productStore = useProductStore()
	const {
		products,
		comments
	} = storeToRefs(productStore);
	
	// let notice = ref(mainProduc.text)
	//swiper当前索引
	let swipercurrentIndex = ref(0)
	//zswiper参数
	let _zSwiper = ref(null)
	// #ifdef MP-WEIXIN
	let options = ref({
		effect: "coverflow",
		grabCursor: true,
		centeredSlides: true,
		slidesPerView: 3,
		coverflowEffect: {
			rotate: 30,
			stretch: -10,
			depth: 60,
			modifier: 1.2,
			slideShadows: true,
		}, 
		initialSlide: swipercurrentIndex.value,
		loop: true,
	})
	// #endif
	// #ifndef MP-WEIXIN
	let options = ref({
		effect: "coverflow",
		grabCursor: true,
		centeredSlides: true,
		slidesPerView: 'auto',
		coverflowEffect: {
			rotate: 30,
			stretch: -10,
			depth: 60,
			modifier: 2,
			slideShadows: true,
		},
		initialSlide: swipercurrentIndex.value,
		loop: true,
	})
	// #endif
	//热卖产品
	let hotProducs =ref([])
	//  computed(()=>{
	// 	let _pro= products.value.filter(row=>row.ifhot==1)
	// 	console.log(123,_pro);
	// 	return _pro
	// })
	//主推产品
	let mainProduc= computed(()=>{
		let _pro= products.value.filter(row=>row.main==1)
		
		return _pro[0]
	})
	watch(products,(val)=>{
		if(val&&val.length>0)
		setTimeout(()=>{
			let _pro= products.value.filter(row=>row.ifhot==1)
			hotProducs.value.push(..._pro)
		},400) 
		//console.log(123123132132,val);
	},{immediate:true})




	//打开主推产品
	let handleMainPro=()=>{
		showProduc(mainProduc.value.id)
	}
	//显示产品详情
	let showProduc = (id) => {
		uni.$emit('showProDetail', id)
	}
	//swiper初始化事件
	let initSwiper = (swiper) => {
		try {
			// _zSwiper.value.swiper.on("slideChange", (swiper) => {
			// 	swipercurrentIndex.value = swiper.activeIndex
			// 	//console.log(swipercurrentIndex.value)
			// });
		} catch (e) {
			console.log(e);
		}
	}
	
 
</script>

<style lang="scss"  >
	.bodyView {
		width: 100vw;
		height: 100%;
	} 

	.menuImg {
		width: 100%;
		height: 50% !important;
		// #ifndef MP-WEIXIN
		height: 60% !important;
		padding-bottom: $mainPadding;
		// #endif
		border-radius: 40rpx;
		@include flex-teng(column, center, center);
		  
		//padding-left: $mainPadding;
		position: relative;

		 
		 
		@include useTheme {
			-webkit-box-reflect: below 20rpx linear-gradient(transparent, transparent, getValue('bgColorReflect'));
		}
		 
		.sellout {
			position: absolute;
			right:10rpx;
			top: $mainPadding;
			width: 100rpx;
			height: 100rpx;
		}

		.bgImg {
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 95%;
			border-radius: 40rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.type {
			padding: 6rpx 20rpx;
			backdrop-filter: blur(30px);
			border-radius: 30px;
			border: 2px solid rgba(255, 255, 255, 0.18);
		}

		.name {
			//font-size: $fontSize_Big;
			z-index: 11;
		}


	}
 
	.homeMainView {
		width: 100vw;
		height: 100%;
		@include flex-teng(column, flex-start);

		.notice {
			margin-top: $mainPadding;
			height: 244rpx;
			border-radius: 40rpx;
			background-color: $mainColor;
			width: calc(100% - $mainPadding * 2);
			position: relative;

			.noticeImage {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 370rpx;
			}

			.noticeText {
				position: absolute;
				z-index: 2;
				right: $mainPadding;
				width: 50%;
				height: 100%;
				@include flex-teng(column, space-evenly);

				.text {
					font-size: $fontSize_Big;
				}
			}
		}

		.hotText {
			padding: calc($mainPadding / 2) 0;
		}

		.menus {
			width: 100vw;
			//padding:calc($mainPadding / 2) 0;
			flex: 1;
			
			// #ifdef MP-WEIXIN
			view:first-child{
				height: 100%;
			}
			// #endif
			
			 
			.swiperMenu {
				width: 100%;
				height: 100%;
				 
				.swiperMenuItem {
					width: calc(434rpx) !important;
					padding-bottom: 320rpx; 
				} 
			}
			 
		}

		.info {
			position: absolute;
			bottom: 210rpx;
			width: 100vw;
			height: 80rpx;
			@include flex-teng;
			column-gap: 20rpx;
			font-size: $fontSize2;
			@include useTheme {
				color: getValue("textColor2");
			}
		}


	}
</style>